import * as util from '@/utils';
import { getMapDetail, updateMap } from '@/api/map';
import { ElMessage } from 'element-plus';

export default {
    namespaced: true,
    state: {
        leftOptions: [
            { icon: 'move', value: 'map-move', desc: '画布移动缩放' },
            { icon: 'pointer', value: 'pointer', desc: '元素选择' },
            { icon: 'rect-select', value: 'rect-select', desc: '框选' },
            { icon: 'draw-polygon', value: 'draw-polygon', desc: '多边形绘制'},
            { icon: 'geometry-circle', value: 'draw-geometry', desc: '', placement: 'top', hasChild: true },
            { icon: 'draw-line', value: 'draw-line', desc: '路径绘制' },
            { icon: 'location', value: 'put-spirit', desc: '', placement: 'top', hasChild: true },
            // { icon: 'draw-device', value: 'draw-device', desc: '设备区域' },
        ],
        rightOptions: [
            { icon: 'map-set', value: 'map-set', desc: '' },
            { icon: 'map-attr', value: 'element-attribute', desc: '' },
            { icon: 'map-layer', value: 'map-layer', desc: '' }
        ],
        geometryOptions: [
            { icon: 'geometry-circle', value: 'circle' },
            { icon: 'geometry-rect', value: 'rect' },
            { icon: 'geometry-half-circle', value: 'half-circle' },
            // { icon: 'geometry-ring', value: 'ring' },
        ],
        mouseTips: {
            'draw-polygon': '鼠标左击依次绘制,右击结束',
            'draw-geometry': '按住鼠标左键拖动调整大小,鼠标抬起结束',
            'draw-line': '点击空白处添加点,按住shift点击已有点改变起始点,<br />点击路线可添加点到线上',
            'shape-clip': '鼠标左击依次添加起始点和结束点',
            'add-hole': '请选择一个形状作为镂空,点击空白处取消',
            // 'draw-device': '按住鼠标左键拖动绘制设备区域'
        },
        contextmenuOptions: [
            { label: '线段转弧线', value: 1 },
            { label: '弧线转线段', value: 2 },
            { label: '添加轮廓点', value: 3 },
            { label: '删除轮廓点', value: 4 },
            { label: '删除', value: 5 },
            { label: '复制', value: 6 },
            { label: '分割', value: 7 },
            { label: '添加镂空', value: 8 },
            { label: '删除导航点', value: 9 },
            { label: '置于顶层', value: 10 },
            { label: '置于底层', value: 11 },
            { label: '删除图标', value: 12 },
        ],
        spiritList: [],
        mapDataHistoryStorage: [],
        currentMapIndex: 0,
        mapId: null,
        mapData: {
            width: 0,
            height: 0,
            svg: '',
            name: '',
            description: ''
        },
        mapBaseImg: '',
        layers: [
            { name: '参考图', containerIds: '', icon: 'Picture',  value: 1, visible: true },
            { name: '图标', containerIds: 'SPIRIT-CONTAINER', icon: 'ShoppingBag', value: 2, visible: true },
            { name: '路径', containerIds: 'ROUTE-CONTAINER', icon: 'Position', value: 3, visible: true },
            { name: '地图', containerIds: 'SHAPE-CONTAINER,MARK-CONTAINER', icon: 'MapLocation', value: 4, visible: true }
        ],
        mapScale: 1
    },
    mutations: {
        SET_MAP_ID: (state, id) => {
            state.mapId = id;
        },
        SET_MAPDATA: (state, data) => {
            state.mapData = data;
        },
        SET_MAP_BASE_IMG: (state, imgUrl) => {
            state.mapBaseImg = imgUrl;
        },
        SET_SPIRIT_LIST: (state, data) => {
            state.spiritList = data;
        },
        SET_LAYER_STATUS_BY_VALUE: (state, value) => {
            const l = state.layers.find(item=>item.value==value);
            l.visible = !l.visible;
        },
        ADD_MAPDATA_HISTORY: (state,node) => {
            //state.mapDataHistoryStorage.splice(9,1,node);
            const index = state.currentMapIndex;
            state.mapDataHistoryStorage.splice(index+1);
            if(state.mapDataHistoryStorage.length>9){
                state.mapDataHistoryStorage.splice(0,1);
            }
            state.mapDataHistoryStorage.push(node);
            state.currentMapIndex = state.mapDataHistoryStorage.length - 1;
            //最多保存10条历史数据
        },
        SET_CURRENT_MAP_INDEX: (state, index) => {
            state.currentMapIndex = index;
        },
        SET_MAP_SCALE: (state, value) => {
            state.mapScale = value;
        },
    },
    actions: {
        setMapId({ commit, dispatch }, id) {
            commit('SET_MAP_ID', id);
        },
        setMapData({ commit, state, dispatch }, data) {
            commit('SET_MAPDATA', data);
        },
        setMapBaseImg({ commit, state, dispatch }, url) {
            commit('SET_MAP_BASE_IMG', url);
        },
        setSpiritList({ commit, dispatch }, data) {
            commit('SET_SPIRIT_LIST',data);
        },
        setLayerStatus({ commit, dispatch }, value) {
            commit('SET_LAYER_STATUS_BY_VALUE',value);
        },
        addMapDataHistory({ commit, dispatch }, node) {
            commit('ADD_MAPDATA_HISTORY',node);
        },
        getHistoryMapData({ commit, state, dispatch }, type) {
            console.log('之前的历史记录索引，',state.currentMapIndex)
            const index = type == 'pre'?( state.currentMapIndex-1):( state.currentMapIndex+1);
            if(index>state.mapDataHistoryStorage.length - 1 || index < 0){
                return null
            }
            console.log('当前的历史记录索引，',index)
            commit('SET_CURRENT_MAP_INDEX',index);
            return state.mapDataHistoryStorage[index]
            //dispatch('setMapData',state.mapDataHistoryStorage[index])
        },
        saveMap({ commit, state, dispatch }, svgString) {
            updateMap(state.mapId,{
                baseImg: state.mapBaseImg||'',
                svg: svgString
            }).then(res=>{
                ElMessage.success('地图保存成功');
            })
        }
    }
}